<template>
  <el-form class="fillup-school" ref="form" :model="formData" :rules="rules">
    <el-form-item prop="schoolName">
      <el-input
        v-model="formData.schoolName"
        :placeholder="$tInput('school.schoolName')"
      >
        <template #prefix>
          <SvgIcon name="gongsi" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="socialCreditCode">
      <el-input
        v-model="formData.socialCreditCode"
        :placeholder="$tInput('field.socialCreditCode')"
      >
        <template #prefix>
          <SvgIcon name="xinyongdaima" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="schoolType">
      <el-select
        v-model="formData.schoolType"
        :placeholder="$tSelect('school.schoolType')"
      >
        <template #prefix>
          <SvgIcon name="type" />
        </template>
        <el-option
          v-for="item in dictData['school_type']"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="schoolScale">
      <el-select
        v-model="formData.schoolScale"
        :placeholder="$tSelect('school.schoolScale')"
      >
        <template #prefix>
          <SvgIcon name="renwu-tuandui" />
        </template>
        <el-option
          v-for="item in dictData['school_scale']"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="schoolAddress">
      <el-input
        v-model="formData.schoolAddress"
        :placeholder="$tInput('school.schoolAddress')"
      >
        <template #prefix>
          <SvgIcon name="suozaidi" />
        </template>
      </el-input>
    </el-form-item>
    <el-button
      class="w-100"
      type="primary"
      round
      @click="submitForm"
      :loading="submiting"
      >保存并下一步</el-button
    >
  </el-form>
</template>

<script>
import { dictMixin } from 'mixins'
import { fillup } from 'services/school/auth'
import { mapState } from 'vuex'
export default {
  name: 'FillupSchool',
  mixins: [dictMixin],
  dicts: ['school_type', 'school_scale'],
  data() {
    return {
      formData: {},
      submiting: false,
      captcha: null,
      uuid: null,
      captchaImg: null
    }
  },
  computed: {
    ...mapState(['userInfo']),
    rules() {
      return {
        schoolName: this.$rule('school.schoolName', {
          required: true
        }),
        socialCreditCode: this.$rule('field.socialCreditCode', {
          required: true
        }),
        schoolType: this.$rule('school.schoolType', {
          required: true,
          trigger: 'blur'
        }),
        schoolScale: this.$rule('school.schoolScale', {
          required: true,
          trigger: 'blur'
        }),
        schoolAddress: this.$rule('school.schoolAddress', {
          required: true
        })
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        const valid = await this.$refs.form.validate()
        if (!valid) {
          return
        }
        this.submiting = true
        await fillup(this.formData)
        this.$emit('success')
      } finally {
        this.submiting = false
      }
    }
  },
  created() {
    this.formData = { ...this.userInfo }
  }
}
</script>
